<script setup>
import {ref, onBeforeMount} from 'vue'
import MarkdownIt from "markdown-it";
import hljs from "highlight.js";

const props = defineProps({
    content: {
        type: String,
        required: true,
        default: '',
    },
})


const text = ref("");
const isJSON = ref(false);

//#region 方法

const init = () => {
    return new MarkdownIt({
        highlight: function (str, lang) {
            if (lang && hljs.getLanguage(lang)) {
                return `<div class="hljs">${
                    hljs.highlight(str, { language: lang }).value
                }</div>`;
            }
            if (str) {
                return `<div class="hljs">${str}</div>`;
            }
            return ''
        },
        html: true,
        breaks: true
    });
};

//#region 生命周期
onBeforeMount(() => {
    let md = init();
    let content = "";
    if (props.content !== null && typeof props.content === "object") {
        isJSON.value = true
        content = `\`\`\`json\n${JSON.stringify(props.content,null,2)}\n\`\`\``;
    } else {
        isJSON.value = false
        content = props.content.replace(/\\n/g, "  \n") || "";
    }
    text.value = md.render(content);
});
//#endregion
</script>

<template>
    <div class="text" :class="isJSON && 'json-text'" v-html="text"></div>
</template>
<style>
@import "highlight.js/styles/vs2015.css";
</style>
<style scoped lang="scss">
.json-text {
    max-height: 500px;
    overflow: auto;
    :deep(pre) {
        margin: 0;
    }
    :deep(code) {
        margin: 0 !important;
        overflow-x: unset;
    }
    &::-webkit-scrollbar {
        border-radius: 4px;
        width: 8px;
        height: 8px;
        background: rgba(222, 222, 222, 0.5);
    }

    &::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: rgb(255, 246, 246, 0.8);
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, 0.5);
        transition: all 0.2s;
        border-radius: 4px;
        &:hover {
            background-color: rgba(144, 147, 153, 0.7);
        }
    }
}
:deep(p) {
    margin: 0;
}
:deep(code) {
    display: block;
    font-size: 1.125em !important;
    margin: 0.625em !important;
    background: #1e1e1e;
    overflow-x: auto;
    border-radius: 6px;

    &::-webkit-scrollbar {
        border-radius: 4px;
        width: 8px;
        height: 8px;
        background: rgba(222, 222, 222, 0.5);
    }

    &::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: rgb(255, 246, 246, 0.8);
    }

    &::-webkit-scrollbar-thumb {
        background-color: rgba(144, 147, 153, 0.5);
        transition: all 0.2s;
        border-radius: 4px;

        &:hover {
            background-color: rgba(144, 147, 153, 0.7);
        }
    }
}
:deep(code:not([class*="language-"])) {
    display: inline !important;
    margin: 0px !important;
    background: #fff;
    color: #000;
    // white-space: pre-wrap;
    white-space: break-spaces;
}

:deep(.hljs) {
    width: max-content;
    padding: 1.25em !important;
}
</style>